<template>
	<view class="rank-container">
		<view class="rank-bg">
			<view class="personal-info">
				<image class="avatar" :src="personRank.avatar"></image>
				<view class="nickname">{{personRank.nickname}}</view>
			</view>
			<view class="user-rank">
				<view class="rank-info">
					<view class="rank-name">排名</view>
					<view class="rank-num">{{personRank.rowNum}}</view>
				</view>
				<view class="rank-info">
					<view class="rank-name">总发布</view>
					<view class="rank-num">{{personRank.totalPublish}}</view>
				</view>
				<view class="rank-info">
					<view class="rank-name">车找人</view>
					<view class="rank-num">{{personRank.carPublish}}</view>
				</view>
				<view class="rank-info">
					<view class="rank-name">人找车</view>
					<view class="rank-num">{{personRank.peoplePublish}}</view>
				</view>
			</view>
		</view>
		<view class="rank-title">信息发布排行榜Top20</view>
		<view class="rank-content">
			<view class="rank-t-header">
				<span class="rank-h-clouml">排行</span>
				<span class="rank-h-cloum2">用户</span>
				<span class="rank-h-cloum3">总发布</span>
				<span class="rank-h-cloum4">车找人</span>
				<span class="rank-h-cloum5">人找车</span>
			</view>
			<scroll-view scroll-y="true" :style="{height:'50vh'}">
				<view class="rank-t-body" v-for="user in userRanks" :key="user.rowNum">
					<image class="rank-b-clouml-image" v-if="user.rowNum === 1" src="../../static/images/rank/rank1.png"></image>
					<image class="rank-b-clouml-image" v-else-if="user.rowNum === 2" src="../../static/images/rank/rank2.png"></image>
					<image class="rank-b-clouml-image" v-else-if="user.rowNum === 3" src="../../static/images/rank/rank3.png"></image>
					<span class="rank-b-clouml" v-else>{{user.rowNum}}</span>
					<span class="rank-b-cloum2 ,user-info">
						<image class="user-avatar" :src="user.avatar"></image>
						<view class="user-nickname">{{user.nickname}}</view>
					</span>
					<span class="rank-b-cloum3">{{user.totalPublish}}</span>
					<span class="rank-b-cloum4">{{user.carPublish}}</span>
					<span class="rank-b-cloum5">{{user.peoplePublish}}</span>
				</view>
			</scroll-view>
		</view>
	</view>

</template>

<script>
	import {
		userRanks
	} from '@/Service/homeService.js'
	import {
		wxLogin
	} from '@/Service/login.js';
	export default {
		data() {
			return {
				personRank: null,
				userRanks: []
			};
		},
		methods: {
			getUserRanks() {
				let self = this
				userRanks().then((ret) => {
					let res = ret.data;
					self.personRank = res.personRank;
					self.userRanks = res.userRanks;
				}).catch((err) => {
					if (err.statusCode == 401) {
						uni.login({
							provider: "weixin",
							success: (login_ret => {
								let params = {
									code: login_ret.code,
								}
								wxLogin(params).then((userlogin) => {
									if (userlogin.data.code == 0) {
										uni.setStorageSync('token', userlogin.data.data.token)
										uni.setStorageSync('phone', userlogin.data.data.phone)
										uni.setStorageSync('avatar', userlogin.data.data.avatar)
										uni.setStorageSync('nickname', userlogin.data.data.nickname)
										let userInfo = {
											avatar: userlogin.data.data.avatar,
											nickname: userlogin.data.data.nickname,
											phone: null,
										}
										self.$store.dispatch('userInfo', userInfo)
										setTimeout(() => {
											userRanks().then((ret) => {
												let res = ret.data;
												self.personRank = res.personRank;
												self.userRanks = res.userRanks;
											})
										}, 300);
									}
									if (userlogin.statusCode == 403) {
										self.$store.dispatch("noLogin", !self.$store.state.noLogin)
										setTimeout(() => {
											userRanks().then((ret) => {
												let res = ret.data;
												self.personRank = res.personRank;
												self.userRanks = res.userRanks;
											})
										}, 500);
										/* uni.navigateTo({
											url: "/pages/home/index?tabListIndex=2"
										}) */
									}
								}).catch((error) => {
									console.log(error)
								})
							})
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.rank-container {
		width: 100%;
		font-family: Source Han Sans CN;
		background-color: #F8F8F8;

		.rank-bg {
			width: 100%;
			height: 394upx;
			background-image: url('https://static.hxt.daoyintc.com/view/rank/bg.png');
			background-size: 100%;

			.personal-info {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				margin-bottom: 46upx;
				padding-top: 51upx;

				.nickname {
					font-size: 30upx;
					font-weight: 500;
					color: #FEFEFE;
				}

				.avatar {
					width: 130upx;
					height: 130upx;
					margin-bottom: 20upx;
					border-radius: 50%;
				}
			}

			.user-rank {
				display: flex;
				justify-content: space-evenly;
				align-items: center;

				.rank-info {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					.rank-name {
						font-size: 26upx;
						font-weight: 400;
						color: #FEFEFE;
						opacity: 0.7;
					}

					.rank-num {
						font-size: 40upx;
						font-weight: 500;
						color: #FFFFFF;
					}
				}
			}
		}

		.rank-title {
			margin: 27upx 0 29upx 29upx;
			font-size: 30upx;
			font-weight: 500;
			color: #333333;
		}

		.rank-content {
			background: #FFFFFF;
			border-radius: 10upx;
			width: 690upx;
			margin: 0 30upx;
			padding-top: 27upx;

			.rank-t-header {
				margin: 0 26upx;
				width: 638upx;
				height: 79upx;
				display: flex;
				justify-content: center;
				align-items: center;
				border-bottom: 2upx solid #F8F8F8;
				font-size: 26upx;
				font-weight: 400;
				color: #999999;

				.rank-h-clouml {
					line-height: 85upx;
					width: 64upx;
					text-align: center;
				}

				.rank-h-cloum2 {
					width: 214upx;
					text-align: center;
				}

				.rank-h-cloum3 {
					width: 120upx;
					text-align: center;
				}

				.rank-h-cloum4 {
					width: 120upx;
					text-align: center;
				}

				.rank-h-cloum5 {
					width: 120upx;
					text-align: center;
				}
			}

			.rank-t-body {
				margin: 0 26upx;
				width: 638upx;
				height: 130upx;
				display: flex;
				justify-content: center;
				align-items: center;
				border-bottom: 2upx solid #F8F8F8;

				.rank-b-clouml-image {
					width: 50upx;
					height: 50upx;
					margin-right: 14upx;
				}

				.rank-b-clouml {
					font-size: 30upx;
					font-weight: 500;
					color: #666666;
					width: 64upx;
					text-align: center;
				}

				.rank-b-cloum2 {
					width: 214upx;
					text-align: center;
				}

				.rank-b-cloum3 {
					width: 120upx;
					text-align: center;
					font-size: 34upx;
					font-weight: 500;
					color: #4687FF;
				}

				.rank-b-cloum4 {
					width: 120upx;
					text-align: center;
					font-size: 34upx;
					font-weight: 500;
					color: #333333;
				}

				.rank-b-cloum5 {
					width: 120upx;
					text-align: center;
					font-size: 34upx;
					font-weight: 500;
					color: #333333;
				}
			}
		}

		.user-info {
			display: flex;
			justify-content: center;
			align-items: center;

			.user-avatar {
				width: 70upx;
				height: 70upx;
				border-radius: 50%;
				margin-right: 20upx;
			}

			.user-nickname {
				width: 104upx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				font-size: 26upx;
				font-weight: 400;
				color: #333333;
			}
		}
	}
</style>
